// Tab like radio group

.radio-group {
  @include clearfix;
}

.radio-label {
  float: left;
  // stylelint-disable-next-line primer/spacing
  padding: 6px var(--base-size-16) 6px calc(var(--base-size-16) + 12px + var(--base-size-8)); // 12px is the size of the radio-input
  // stylelint-disable-next-line primer/spacing
  margin-left: -1px;
  // stylelint-disable-next-line primer/typography
  font-size: $body-font-size;
  // stylelint-disable-next-line primer/typography
  line-height: 20px; // Specifically not inherit our `<body>` default
  color: var(--fgColor-default, var(--color-fg-default));
  cursor: pointer;
  // stylelint-disable-next-line primer/borders, primer/colors
  border: $border-width $border-style var(--borderColor-default, var(--color-border-default));

  :checked + & {
    position: relative;
    z-index: 1;
    border-color: var(--borderColor-accent-emphasis, var(--color-accent-emphasis));
  }

  &:first-of-type {
    margin-left: 0;
    // stylelint-disable-next-line primer/borders
    border-top-left-radius: $border-radius;
    // stylelint-disable-next-line primer/borders
    border-bottom-left-radius: $border-radius;
  }

  &:last-of-type {
    // stylelint-disable-next-line primer/borders
    border-top-right-radius: $border-radius;
    // stylelint-disable-next-line primer/borders
    border-bottom-right-radius: $border-radius;
  }

  .octicon {
    margin-left: var(--base-size-4);
    color: var(--fgColor-muted, var(--color-fg-subtle));
  }
}

.radio-input {
  z-index: 3;
  float: left;
  // stylelint-disable-next-line primer/spacing
  margin: 10px calc(var(--base-size-32) * -1) 0 var(--base-size-16);

  &:disabled {
    position: relative; // enables z-index

    + .radio-label {
      color: var(--fgColor-disabled, var(--color-primer-fg-disabled));
      cursor: default;
      background-color: var(--bgColor-neutral-muted, var(--color-neutral-subtle));

      .octicon {
        color: inherit;
      }
    }
  }
}
